<!-- 设置动态表单组件--左侧控件列表 -->
<template>
  <div class="leftConfig">
    <div class="formSetUp">
      <div class="leftConfig-title">表单设置</div>
      <div class="formSetUp-body">
        <a-radio-group type="button" v-model="copyLayout">
          <a-radio value="horizontal">水平排列</a-radio>
          <a-radio value="vertical">垂直排列</a-radio>
          <!-- <a-radio value="inline">行内排列</a-radio> -->
        </a-radio-group>
      </div>
    </div>
    <div class="tabs">
      <!--tabs列表  -->
      <a-tabs lazy-load v-model:active-key="tabChoiceKey">
        <a-tab-pane
          v-for="item in tabShowList.length > 1
            ? tabShowList.slice(1)
            : tabShowList"
          :key="item.code"
          :title="item.name"
        >
        </a-tab-pane>
      </a-tabs>
      <!-- 拖拽组件 -->
      <draggable
        style="height: 85%"
        @end="end"
        v-if="tabChoiceKey === 'baseComponent'"
        class="tabComponentBox"
        :list="componentTabList"
        :group="{ name: 'people', pull: 'clone', put: false }"
        itemKey="controlName"
        :clone="cloneItem"
      >
        <template #item="{ element }">
          <div class="tabComponentBox-item">
            <icon-font :type="element.icon" :size="17"></icon-font>
            <span :class="element.icon" class="iconfont" />
            {{ element.componentName }}
          </div>
        </template>
      </draggable>
      <!-- 拖拽组件 -->
      <div style="height: 85%" v-else>
        <div
          class="children"
          v-if="componentTabList?.componentList?.length != 0"
        >
          <draggable
            class="children-tabComponentBox"
            :list="componentTabList.componentList"
            :group="{ name: 'people', pull: 'clone', put: false }"
            itemKey="controlName"
            :clone="cloneItem"
          >
            <template #item="{ element }">
              <div class="children-tabComponentBox-item">
                <span :class="element?.icon" class="iconfont" />
                {{ element.componentName }}
              </div>
            </template>
          </draggable>
        </div>
        <div class="children" v-if="componentTabList?.tabchildren">
          <div v-for="item in componentTabList.tabchildren" :key="item.code">
            <draggable
              :disabled="true"
              class="children-tabComponentBox"
              :list="item.tabcomponentList"
              :group="{ name: 'people', pull: 'clone', put: false }"
              itemKey="controlName"
              :clone="cloneItem"
            >
              <template #item="{ element }">
                <div class="children-tabComponentBox-item">
                  <span :class="element?.icon" class="iconfont" />
                  {{ element.componentName }}
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { isJSON } from '@/utils/isType';
import uniqueid from 'lodash.uniqueid';
import draggable from 'vuedraggable';
import { tabList, componentList } from '../../../setupConfig';
import clonedeep from 'lodash.clonedeep';
import { type } from 'os';
const props = withDefaults(
  //参数说明
  defineProps<{
    layout: string;
    businessType?: string | string[]; //tab显示的tab列表
    tabList: any;
    upData?: any;
    subCode?: string;
  }>(),
  {}
);

const emit = defineEmits(['layoutChange', 'tabChange']);
const tab = reactive(tabList);

watch(
  () => props.tabList,
  (val) => {
    tab.push(...val);
  }
);

const copyLayout = computed({
  get() {
    return props.layout;
  },
  set(val) {
    emit('layoutChange', val);
  }
});

const tabChoiceKey = ref('baseComponent'); //tab 选中的key

//通过tabCodeList过滤出要显示的tab列表
const tabShowList = computed<any>(() => {
  if (!tab.length) {
    return [];
  }
  let list: any;
  if (Array.isArray(props.businessType)) {
    list = props.businessType
      .map((code) => tab?.find((item: any) => code === item.code))
      ?.filter((ele) => ele);
  } else {
    list = [props.businessType]
      .map((code) => tab?.find((item: any) => code === item.code))
      ?.filter((ele) => ele);
  }
  return list;
});

const componentTabList: any = ref(componentList);

const newComponentTabList = reactive({ data: [] });

//通过tabShowList过滤出要显示的component列表
watch(
  () => tabChoiceKey.value,
  () => {
    if (!tabShowList.value.length) {
      componentTabList.value = [];
    }
    const tabItem = tabShowList.value?.find(
      (item: any) => tabChoiceKey.value === item.code
    );
    if (tabChoiceKey.value === 'baseComponent') {
      componentTabList.value = tabItem?.componentCodeList.map((code: string) =>
        componentList.find((item) => item.code === code)
      );
    } else {
      componentTabList.value = tabItem;
    }
  }
);

const init = () => {
  if (Array.isArray(props.businessType)) {
    if (props.businessType.some((ele) => ele === 'baseComponent')) {
      return;
    } else {
      tabChoiceKey.value = props.businessType[0];
    }
  } else {
    if (props.businessType === 'baseComponent' && props.businessType) {
      return;
    } else {
      tabChoiceKey.value = props.businessType || 'baseComponent';
    }
  }
};

setTimeout(() => {
  init();
}, 500);

// console.log('props.businessType', props.businessType);

// watch(
//   () => props.businessType,
//   () => {}
// );

const upData = () => {
  props.upData();
};

//拖拽发生时retuan处理过后的数据
const cloneItem = (data: any) => {
  const {
    subCode,
    componentType,
    props,
    componentName,
    ifAdd,
    del,
    values,
    childrenCtl
  } = data;
  let JSONprops = clonedeep(JSON.stringify(props));
  console.log('aaaa', data);

  return {
    del,
    /**
     * subCode 未处理完成
     */
    subCode: isSubCode(subCode),
    ifAdd,
    // code,
    // props,
    // name: componentName,
    // required: false,
    ctlCnName: componentName,
    cnName: componentName,
    ctlComponentType: componentType,
    ctlCode: 'C' + +new Date(),
    span: 12,
    uuid: uniqueid(''),
    // values: [],0
    componentName: componentName, //控件中文名（唯一）
    enName: '', //控件英文名（唯一）
    // ctlCode: "", //控件编码（唯一）
    enable: 1, //是否开启（1 开启 2 禁用）
    componentType, //控件类型
    required: 2, //控件值是否必填（1 是 2 否）
    // fieldName: "", //控件数据库表列名（唯一）
    props, //控件属性
    // orderNo:0,//控件排序
    isDefault: 2, //是否为默认控件（1 是 2 否）
    values,
    childrenCtl
  };
};
const isSubCode = (subCode?: string) => {
  return subCode ? subCode : props.subCode;
};
const end = () => {
  upData();
};
</script>
<style lang="less" scoped>
.leftConfig {
  min-width: 250px;
  background: #fff;
  display: flex;
  // border-radius: 15px;
  flex-direction: column;

  .tabs {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    .tabComponentBox {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      align-content: flex-start;
      flex-wrap: wrap;
      height: 100%;
      padding: 10px;
      &-item {
        border: rgb(212, 212, 212) solid 1px;
        background: rgb(250, 250, 250);
        width: 40%;
        padding: 5px;
        margin: 5px;
        cursor: pointer;
      }
      &-item:hover {
        background: rgb(241, 238, 255);
        span {
          color: rgb(181, 172, 226);
        }
      }
    }
    .children {
      padding: 0 10px;
      .children-tabComponentBox {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        height: 100%;
        padding: 10px;
        &-item {
          border: rgb(212, 212, 212) solid 1px;
          background: rgb(250, 250, 250);
          width: 120px;
          padding: 5px;
          margin: 5px;
          cursor: pointer;
        }
        &-item:hover {
          background: rgb(241, 238, 255);
          span {
            color: rgb(181, 172, 226);
          }
        }
      }
    }
  }
  height: 100%;
  &-title {
    line-height: 40px;
    height: 40px;
    border-bottom: var(--color-neutral-3) solid 1px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 16px;
  }
}
.formSetUp {
  border-bottom: var(--color-neutral-3) solid 1px;
  &-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
p {
  padding: 0;
  margin: 0;
}
</style>
